<template>
	<view class="mine position-relative">
		<view class="user">
			<image :src="wxUserInfo.userInfo.avatarUrl" class="avatar" />
			<view class="info" @tap="goLogin">
				<view class="name">{{ wxUserInfo.userInfo.nickName || '' }}</view>
				<view class="phone">{{ token ? phone : '未登录' }}</view>
			</view>
			<view class="arrow"></view>
		</view>
		<view class="title">我的</view>
		<view class="func" v-if="token">
			<view :key="item.text" class="item" hover-class="bg-light" @tap="navgiteTo(item.key)" v-for="(item, index) in funcList">
				<view :style="index ? 'border: none' : ''" class="con">
					<view class="left da-center">
						<image :src="item.image" />
						<text>{{ item.text }}</text>
					</view>
					<view class="arrow"></view>
				</view>
			</view>
		</view>

		<view class="px-2 w-100 position-absolute left-0" style="bottom:60rpx">
			<u-button type="error" @click="goLogin('btn')">{{ token ? '退出' : '登录' }}</u-button>
		</view>
		<!-- <TabBar :mine="true" /> -->
		
		<!-- 确定退出确认框 -->
		<u-modal v-model="islogin" content="是否退出" @confirm="confirm" show-cancel-button confirm-text="退出"></u-modal>  
	</view>
</template>

<script>
// import TabBar from '@/components/common/TabBar'
import { mapGetters, mapActions } from 'vuex';

export default { 
	components: {},
	data() {
		return {
			// token: '',
			islogin:false,
			funcList: [
				{
					url: '',
					text: '我参加的活动',
					key: 'myActive',
					image: require('../../static/images/i_icon.png')
				},{
					url:'',
					text: '我提交的维修工单',
					key: 'myWork',
					image: require('../../static/images/i_icon.png')
				},{
					url:'',
					text: '我提交的企业服务工单',
					key: 'myServer',
					image: require('../../static/images/i_icon.png')
				},{
					url:'',
					text: '我预约的场地',
					key: 'myPublicSite',
					image: require('../../static/images/i_icon.png')
				}
				// {
				//   url: '',
				//   text: '设置',
				//   image: require('../../static/images/setting_icon.png')
				// },
			]
		};
	},
	onShow() {
		if(this.token){
			uni.setStorageSync('token',this.token)
			uni.setStorageSync('userInfo',JSON.stringify(this.wxUserInfo))
			uni.setStorageSync('phone',this.phone)
		}
	},
	computed: {
		...mapGetters(['wxUserInfo', 'auth', 'phone','token'])
	},
	methods: {
		confirm(){
			
			uni.clearStorageSync();
			this.clearUserInfo();
			this.islogin = false
		},
		goLogin(code) {
			if (!this.token) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}

			if (this.token && code === 'btn') {
				this.islogin = true
			}
		},
		navgiteTo(key) {
			
			uni.navigateTo({
				url: `/pages/mine/${key}/${key}`
			});
		},
		...mapActions(['clearUserInfo'])
	}
};
</script>

<style lang="scss" scoped>
.mine {
	height: 100vh;
	background: #f3f3f5;
	.user {
		height: 276rpx;
		padding: 45rpx;
		color: #fbfdfb;
		background-color: #df3031;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.avatar {
			width: 105rpx;
			height: 105rpx;
			border-radius: 105rpx;
		}
		.info {
			width: 450rpx;
			display: flex;
			flex-direction: column;
			.name {
				font-size: 32rpx;
			}
			.phone {
				font-size: 22rpx;
			}
		}
		.arrow {
			position: relative;
		}
		.arrow::after {
			display: inline-block;
			content: ' ';
			height: 15rpx;
			width: 15rpx;
			border-width: 4rpx 4rpx 0 0;
			border-color: #fff;
			border-style: solid;
			transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
			position: absolute;
			top: 50%;
			right: 6rpx;
			margin-top: -9rpx;
		}
	}
	.title {
		color: #7a7a7a;
		font-size: 26rpx;
		line-height: 87rpx;
		padding: 0 50rpx;
	}
	.func {
		height: 240rpx;
		padding: 0 20rpx;
		border-radius: 5rpx;
		.item {
			padding: 0 35rpx;
			background: #fff;
			border-radius: 6rpx;
			margin-bottom: 20rpx;
			
			.con {
				height: 120rpx;
				// border-bottom: 1rpx solid #a1a1a1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left {
					display: flex;
					image {
						width: 35rpx;
						height: 35rpx;
					}
					text {
						padding-left: 30rpx;
						font-size: 30rpx;
						color: #5f6064;
					}
				}
				.arrow {
					position: relative;
				}
				.arrow::after {
					display: inline-block;
					content: ' ';
					height: 15rpx;
					width: 15rpx;
					border-width: 4rpx 4rpx 0 0;
					border-color: #5f5f63;
					border-style: solid;
					transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
					position: absolute;
					top: 50%;
					right: 6rpx;
					margin-top: -9rpx;
				}
			}
		}
	}
}


</style>
